<template>
  <div class="column-list">
    <i-content :current-list="currentList" :contentLoading="contentLoading">
      <div slot="list" class="list">
        <div class="column-list">
          <div class="column-list-item" v-for="(item, index) in columnList" @click="selectNew(item)">
            <h5 class="title"><i class="el-icon-tickets"></i>{{ item.newTitle }}</h5>
            <p class="desc">
              {{ item.newDesc }}
            </p>

            <el-badge :value="200" :max="99" class="item">
              <el-button size="small">阅读</el-button>
            </el-badge>

            <i class="date">
              {{ item.date }}
            </i>
          </div>
        </div>
      </div>

      <router-view></router-view>

      <div slot="page" class="page">
        <el-pagination
          layout="prev, pager, next"
          :total="30" :page-size="pageSize" :current-page="currentPage"
          @current-change="currentChange">
        </el-pagination>

        <div class="status">
          <span>总共<em class="all-page">99</em>页</span>
          <span>总共<em class="count">600</em>条记录</span>
          <span>当前<em class="current-page">99</em>页</span>
          <span>每页<em class="display">99</em>页</span>
        </div>
      </div>
    </i-content>
  </div>
</template>

<script type="text/ecmascript-6">
  import IContent from 'base/content/content'
  import axios from 'axios'
  import {ERR_OK} from 'api/config'
  import {mapMutations} from 'vuex'

  export default {
    props: {},
    data() {
      return {
        currentList: [],
        contentLoading: true,
        columnList: [],
        pageSize: 7,
        currentPage: 1,
        newId: 0,
        columnListId: 0
      }
    },
    created() {
      setTimeout(() => {
        this._getColumnList(this.columnListId, this.pageSize, 1)
        this._normalCurrentList()
      }, 20)
    },
    methods: {
      _getColumnList(id, pageSize, currentPage) {
        this.contentLoading = false
        setTimeout(() => {

          console.log("根据columnId {"+id+"} 的变化获取columnId对应新闻列表信息,当前是 "+currentPage+" 页, 默认请求第 "+this.currentPage+" 页显示为 "+this.pageSize+" 条")

          axios.get('/api/getIndexData', {columnId: id * 1, pageSize: pageSize, currentPage: currentPage}).then((res) => {
            if (res.data.code === ERR_OK) {
              let data = res.data.data
              this.columnList = data.columnList
              this.contentLoading = true
              this.columnListId = id
            }
          })
        }, 1000)
      },
      selectNew(item) {
        this.$router.push(`/${this.$route.params.columnName}/${this.$route.params.id}/${item.id}`)
        this.setNewId(item)
        return false
      },
      _normalCurrentList() {
        this.currentList     = []
        let params           = this.$route.params
        let columnId         = params.columnName
        let columnListId     = params.id
        let newId            = params.newId

        if (columnId) {
          this.currentList.push({content: columnId, url: `/${columnId}`})
        }
        if (columnListId) {
          this.currentList.push({content: columnListId, url: `/${columnId}/${columnListId}`})
        }
        if (newId) {
          this.currentList.push({content: newId, url: `/${columnId}/${columnListId}/${newId}`})
        }
      },
      currentChange(newSize) {
        this._getColumnList(this.$route.params.id, this.pageSize, newSize)
      },
      ...mapMutations({
        'setNewId': 'SET_NEWID'
      })
    },
    components: {
      IContent
    },
    watch: {
      $route(to) {
        if(!to.params.newId && to.params.id){
          this._getColumnList(to.params.id, this.pageSize, this.currentPage)
        }
        this._normalCurrentList()
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .column-list
    margin-top: 7px

  .column-list-item
    position: relative
    padding: 9px 10px
    border-bottom: 1px solid $vice-color
    h5.title
      position: relative
      hh(24px)
      padding-right: 150px
      color: $back
      no-wrap()
      font-size: $font-small-x
      font-weight: bold
      padding-left: 25px
      i.el-icon-tickets
        ltp(0, 0)
        sc($font-large-x, $vice-color)
    p.desc
      padding-right: 150px
      height: 40px
      margin-top: 10px
      line-height: 20px
      text-indent: 25px
      overflow: hidden;
      color: #999
    i.date
      rbp(40px, 0px)
      padding: 5px 0
    .item
      position: absolute
      right: 0
      top: 0
      margin-top: 10px
      margin-right: 40px

  .page
    lbp(0, 0)
    right: 0
    padding: 10px 0
    .status
      margin-top: 5px
      padding: 10px 0 0 10px
      em
        margin: 0 3px;
        font-style: normal
        font-weight: bold
        sc($font-small-x, $vice-color)

  .loading-wrap
    ltp(0, 0)
    wh(100%, 100%)
    background-color: rgba(0, 0, 0, .4)

  .w990p10
    background-color: #fff
</style>
